<html>
    <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <table class="w-dull">
        <tr>
            <td class="p-10 w-1/3"><code>MemoEvaluator cache</code></td>
            <td class="p-10 w-1/3">
                <p>
                    In chrome, open dev tools > Memory tag, click on
                    "Take heap snapshot". First of all, check that there are not existing leaks affecting the test results clicking on
                    "Take heap snapshot": it should not found any results;
                    if it does, you might want to run the test in incognito
                    mode so it does not load any chrome extensions).
                    Once verified, click the "test" button, go to the memory
                    tab, click "Collect garbage" a couple of times, take another snapshot and verify we don't have any new
                    detached node in memory.
                </p>
            </td>
            <td class="p-10 w-1/3">
                <div id="one" x-data="{ foo: 'bar' }">
                    <span x-text="foo"></span>
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" @click="document.getElementById('one').remove()">Test</button>
                </div>
            </td>
        </tr>
    </table>
</html>
